<template>
	<view>
		<!--首页-->
		<view-home
			:scrollY="scrollY"
			:scrollBottom="scrollBottom"
			:refreshStare='refreshStare'
			v-if="footMenu[0].load"
		/>
		
		<!--闲本-->
		<view-leisurely
			:scrollY="scrollY"
			:scrollBottom="scrollBottom"
			:refreshStare='refreshStare'
			v-if="footMenu[1].load"
		/>
			
		<!--活动-->
		<view-activity
			:scrollY="scrollY"
			:scrollBottom="scrollBottom"
			:refreshStare='refreshStare'
			v-if="footMenu[2].load"
		/>
			
		<!--社区-->
		<view-community
			:scrollY="scrollY"
			:scrollBottom="scrollBottom"
			:refreshStare='refreshStare'
			v-if="footMenu[3].load"
		/>
			
		<!--我的-->
		<view-mine
			:scrollY="scrollY"
			:scrollBottom="scrollBottom"
			:refreshStare='refreshStare'
			:pageShow="pageShow"
			v-if="footMenu[4].load"
		/>
		
		<!--底部导航-->		
		<view class="cu-bar tabbar bg-white shadow foot">
			<block v-for="(menu, index) in footMenu" :key="index">
				<view class="action text-black"  
					:class="[index== 2 ?'add-action':'']"
					@click="footMenuChange" 
					:data-cur="menu.page">
					<view class='cuIcon-cu-image'>
						<image class="icon-image" 
						:src="'/static/tab/ic_tab_' + menu.page + [indexPage== menu.page ?'_select':'_normal'] + '.png'"></image>
					</view>
					<view  :class="indexPage==menu.page?'text-bold':''">{{menu.name}}</view>
				</view>
			</block>
		</view>
		

	</view>
</template>

<script>
import { mapState } from "vuex";
import viewHome from '@/components/app/viewHome.vue';
import viewLeisurely from '@/components/app/viewLeisurely.vue';
import viewActivity from '@/components/app/viewActivity.vue';
import viewCommunity from '@/components/app/viewCommunity.vue';
import viewMine from '@/components/app/viewMine.vue';
let timer;
/**************************************************************/
	export default {
		components: {
			viewHome,
			viewLeisurely,
			viewActivity,
			viewCommunity,
			viewMine,
		},
		data() {
			return {
				footMenu: [{
					page: 'home',
					name: '首页',
					load: false,
				}, {
					page: 'leisurely',
					name: '闲本',
					load: false,
				}, {
					page: 'activity',
					name: '活动',
					load: false,
				}, {
					page: 'community',
					name: '社区',
					load: false,
				}, {
					page: 'mine',
					name: '我的',
					load: false,
				}],
				pageShow: false,
				scrollY: 0,
				scrollBottom: 0,
				refreshStare: false
			}
		},
		computed: {
			...mapState(['indexPage']),
		},
		watch: {
			indexPage(pageCur) {
				let curPage = this.findPage(pageCur)
				if(!curPage.load) {
					curPage.load = true
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			}
		},
		methods: {
			footMenuChange(e) {
				let pageCur = e.currentTarget.dataset.cur
				if (pageCur != this.indexPage) {
					this.$store.commit('SET_INDEX_PAGE', pageCur)
				}
			},
			findPage(pageCur) {
				return this.footMenu.find(menu => {
					return  menu.page == pageCur
				})
			},
		},
		onLoad() {
			let curPage = this.findPage(this.indexPage)
			curPage.load = true
			
		},
		onShow() {
			this.pageShow = !this.pageShow
		},
		
		onPageScroll(e) {
			// this.scrollY = e.scrollTop;
		},
		onPullDownRefresh: function() {
			this.refreshStare = !this.refreshStare
			if(timer) {
				clearTimeout(timer)
			}
			timer = setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(e) {
			let timestamp = new Date().getTime();
			this.scrollBottom = timestamp;
		},
		
		onUnload() {  
		    if(timer) {
				clearTimeout(timer);
				timer = null;
		    }  
		},
		
		onShareAppMessage (options) {
			if (options.from === "menu") {
				return {
					title: '聚会的方式不止一种',
					path: '/pages/app/index'
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.icon-image{
		width: 38rpx !important;
		height: 38rpx !important;
		margin-bottom: 8rpx;
	}
	.add-action{
		.icon-image{
			width: 60rpx !important;
			height: 60rpx !important;
			margin-bottom: 8rpx;
		}
	}
</style>